<template>
  <div class="project-config">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目名" prop="projectName" required>
            <el-input v-model="form.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="版本号" prop="projectVersion" required>
            <el-input v-model="form.projectVersion"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作者" prop="projectAuthor" required>
            <el-input v-model="form.projectAuthor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="包路径" prop="projectPackage" required>
            <el-input v-model="form.projectPackage"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目路径" prop="projectPath" required>
            <el-input v-model="form.projectPath"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getProject, updateProject} from "@/api/baseconfig";
import {Message} from "element-ui";

export default {
  name: 'projectConfig',
  data() {
    return {
      id: undefined,
      form: {
        projectName: undefined,
        projectVersion: undefined,
        projectAuthor: undefined,
        projectPackage: undefined,
        projectPath: undefined
      },
      // 表单校验
      rules: {
        projectName: [
          {required: true, message: '请输入项目名', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur'}
        ],
        projectVersion: [
          {required: true, message: '请输入版本号', trigger: 'blur'}
        ],
        projectAuthor: [
          {required: true, message: '请输入作者', trigger: 'blur'}
        ],
        projectPackage: [
          {required: true, message: '请输入包路径', trigger: 'blur'}
        ],
        projectPath: [
          {required: true, message: '请输入项目路径', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getProject();
  },
  methods: {
    getProject() {
      getProject().then(res => {
        this.id = res.data.id;
        this.form = res.data;
      })
    },
    onSubmit() {
      updateProject(this.id, this.form).then(() => {
        Message.success("保存成功");
      })
    },
    onCancel() {
      location.reload();
    }
  }
}
</script>
